<template>
    <view class="wrap">
        <view class="top"></view>
        <view class="content">
            <view class="title">欢迎登录竞赛报名系统</view>
            <input class="u-border-bottom" type="number" v-model="phone" placeholder="请输入手机号" />
            <input class="u-border-bottom" type="password" v-model="password" placeholder="输入密码" />
            <view class="tips">未注册的手机号登录后自动创建账号</view>
            <button :style="[inputStyle]" @click="submit" class="getCaptcha">登录</button>
            <button style="margin-top: 10rpx;backgroundColor:#efffd3;color: #18B566;" :style="[inputStyle]" @click="show = true" class="getCaptcha">注册</button>
        </view>
        <u-popup v-model="show" mode="bottom">
            <view style="margin: 20rpx;">
                <u-field v-model="phone" label="手机号" placeholder="请输入手机号" />
                <u-field v-model="password" label="密码" placeholder="输入密码" />
                <div style="text-align: center;margin: 30rpx;"><u-button size="medium" @click="submit1">保存</u-button></div>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phone: '',
            password: '',
            show: false
        }
    },
    computed: {
        inputStyle() {
            let style = {}
            if (this.tel) {
                style.color = '#fff'
                style.backgroundColor = this.$u.color['warning']
            }
            return style
        }
    },
    methods: {
        submit() {
            if (this.$u.test.mobile(this.phone) && this.password) {
                this.$u.post('/apps/sysUserEntity/login', { phone: this.phone, password: this.password }).then(res => {
                    if (res.code == 200) {
                        console.log(res)
                        uni.setStorage({
                            key: 'user_info',
                            data: res.user,
                            success: () => {
                                this.$u.route({
                                    type: 'tab',
                                    url: 'pages/notice/notice_list'
                                })
                            }
                        })
                    } else {
                        this.$refs.uToast.show({
                            title: '登录失败，用户名或密码错误'
                        })
                    }
                })
            }
        },
        submit1() {
            this.$u.post('/apps/sysUserEntity/login', { phone: this.phone, password: this.password }).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '标题',
                        duration: 2000
                    })
                    this.show = false
                } else {
                    uni.showToast({
                        title: '注册失败',
                        duration: 2000
                    })
                    this.show = false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.wrap {
    font-size: 28rpx;
    .content {
        width: 600rpx;
        margin: 80rpx auto 0;

        .title {
            text-align: left;
            font-size: 60rpx;
            font-weight: 500;
            margin-bottom: 100rpx;
        }
        input {
            text-align: left;
            margin-bottom: 10rpx;
            padding-bottom: 6rpx;
        }
        .tips {
            color: $u-type-info;
            margin-bottom: 60rpx;
            margin-top: 8rpx;
        }
        .getCaptcha {
            background-color: rgb(253, 243, 208);
            color: $u-tips-color;
            border: none;
            font-size: 30rpx;
            padding: 12rpx 0;

            &::after {
                border: none;
            }
        }
        .alternative {
            color: $u-tips-color;
            display: flex;
            justify-content: space-between;
            margin-top: 30rpx;
        }
    }
    .buttom {
        .loginType {
            display: flex;
            padding: 350rpx 150rpx 150rpx 150rpx;
            justify-content: space-between;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: $u-content-color;
                font-size: 28rpx;
            }
        }

        .hint {
            padding: 20rpx 40rpx;
            font-size: 20rpx;
            color: $u-tips-color;

            .link {
                color: $u-type-warning;
            }
        }
    }
}
</style>
